import './enroll.scss'
import { useState } from "react";


export default function Enroll() {
    const [uname, setuname] = useState('')
    const [unameBlue, setunameBlue] = useState(false);
    const [unameRed, setunameRed] = useState(false);
    // const [unameError, setunameError] = useState(false);

    const [tel, settel] = useState('');
    const [telError, settelError] = useState(false);
    const [telBlue, settelBlue] = useState(false);
    const [telRed, settelRed] = useState(false);

    const [password, setpassword] = useState('');
    const [passwordError, setpasswordError] = useState(false);
    const [passwordMsgShow, setpasswordMsgShow] = useState(false);
    const [passwordRed, setpasswordRed] = useState(false);
    const [passwordBlue, setpasswordBlue] = useState(false);


    // uname的input事件
    function unameInput(e) {
        setuname(e.target.value)
    }
    // uname聚焦
    function unameFocus() {
        setunameBlue(true)
        setunameRed(false)
    }
    // uname失焦
    function unameBlur() {
        setunameBlue(false)
        // 非纯数字 !/^[0-9]+$/
        // 中文  [\u4e00-\u9fa5]{0,7}
        // 一共14个字符
        if (!/^[0-9]+$/.test(uname) && /^[\u4e00-\u9fa5a-zA-Z_\d]+$/.test(uname) && uname.length + uname.match(/[\u4e00-\u9fa5]/g).length <= 14 || uname == '') {
            setunameRed(false)
        } else {
            setunameRed(true)
        }
    }

    // 电话input事件
    function telInput(e) {
        settel(e.target.value)
    }
    // 聚焦
    function telFocus() {
        settelBlue(true)
        settelRed(false)
    }
    // 失焦
    function telBlur() {
        settelBlue(false)
        console.log(tel);
        if (!/^1[3,4,5,7,8][0-9]{9}$/.test(tel)) {
            settelError(true)
            settelRed(true)
        }
        if (/^1[3,4,5,7,8][0-9]{9}$/.test(tel) || tel == '') {
            settelError(false)
            settelRed(false)
        }
    }

    // 密码框Input事件
    function passwordInput(e) {
        setpassword(e.target.value)
    }
    // 聚焦
    function passwordFocus() {
        setpasswordRed(true)
        setpasswordMsgShow(true)
        setpasswordError(false)

        var passwordReg = /^(?![0-9]+$)(?![a-zA-Z]+$)(?![\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F]+$)([0-9a-zA-Z\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F]{8,14})$/.test(password)

        if (password != '' && passwordReg) {
            setpasswordRed(false)
            setpasswordBlue(true)
        }
    }

    // 失焦
    function passwordBlur() {
        setpasswordMsgShow(false)
        setpasswordBlue(false)
        // 字母 数字 标点符号至少2种 {8-14}

        var passwordReg = /^(?![0-9]+$)(?![a-zA-Z]+$)(?![\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F]+$)([0-9a-zA-Z\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F]{8,14})$/.test(password)
        if (!passwordReg || password == '') {
            setpasswordRed(true)
            setpasswordError(true)
        }
        if (passwordReg) {
            setpasswordError(false)
            setpasswordRed(false)
        }
    }

    var passwordReg = /^(?![0-9]+$)(?![a-zA-Z]+$)(?![\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F]+$)([0-9a-zA-Z\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F]{8,14})$/.test(password)
    return (
        <div id="html">
            <div className="nav-s">
                <span>帮助中心</span> <span>|</span>
                <span>2021 @Baidu</span>
            </div>
            <h1>
                用科技
                <div>让复杂的世界更简单</div>
            </h1>
            <img src="https://passport.baidu.com/static/passpc-account/img/baidu.png" alt="" />
            <div className="app">
                <h3>欢迎注册<p className="p1">已有账号？<a href="#">登录</a></p>
                </h3>
                <form action="" className="form1">
                    {unameBlue && <span className="pa">设置后不可更改,中英文均可,最长14个英文或7个汉字</span>}
                    <span className='title'>用户名</span>
                    <input type="text" placeholder="请设置用户名" className={`input inp1 inputactive ${unameBlue ? 'focus' : ''} ${unameRed ? 'error' : ''}`} autoFocus value={uname} onInput={unameInput}
                        onFocus={unameFocus} onBlur={unameBlur} />
                    {unameRed && <span className="pba">用户名仅支持中英文、数字和下划线,且不能为纯数字</span>}
                    <span className="span1"></span>
                </form>
                <form action="">
                    <span className="title">手机号</span>
                    <input type="text" placeholder="可用于登录和找回密码" value={tel} onInput={telInput}
                        onFocus={telFocus} onBlur={telBlur} className={`input inp2 ${telBlue ? 'focus' : ''} ${telRed ? 'error' : ''}`} />
                    {telError && <span className="pba">手机号码格式不正确</span>}
                </form>
                <form action="">
                    {passwordMsgShow && (
                        <section className="pb">
                            <p className={(password != '' && !/^.{8,14}$/.test(password)) ? 'p_error' : ''}>
                                <em>长度为8~14个字符</em>
                            </p>
                            <p className={(password != '' && !/^(?![0-9]+$)(?![a-zA-Z]+$)(?![\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F]+$)([0-9a-zA-Z\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F]+)$/.test(password)) ? 'p_error' : ''}>
                                <em>字母/数字以及标点符号至少包含2种</em>
                            </p>
                            <p className={(password != '' && /^([\u4e00-\u9fa5]+)|\s+$/.test(password)) ? 'p_error' : ''}>
                                <em>不允许有空格、中文</em>
                            </p>
                            <span></span>
                        </section>
                    )}
                    <span className="title">密码</span>
                    <input type="password" placeholder="请设置登录密码" className={`${passwordRed ? 'error' : ''} ${passwordBlue ? 'focus' : ''} input inp3`}
                        value={password} onInput={passwordInput}
                        onFocus={passwordFocus} onBlur={passwordBlur} />
                    {passwordError && <span className="pba" >密码设置不符合要求</span>}
                </form>
                <form action="">
                    <span className="title">验证码</span>
                    <input
                        type="text"
                        placeholder="请输入验证码"
                        className="input1 inp4" />
                    <span className="span">获取验证码</span>
                    <span className="span4">验证码不正确</span>
                </form>
                <a href="#" className="a">注册</a>
                <div className="log">
                    <input type="checkbox" />阅读并接受<span>《百度用户协议》</span>及<span>《百度隐私权保护声明》</span>
                </div>
            </div>
        </div>
    )
}